<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" class="m-all">
<head th:replace="common :: head('标签')">

</head>
<div id="app" class="m-all">

  <!--导航-->
  <nav th:replace="common :: navMenuX">

    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
      <i class="sidebar icon"></i>
    </a>
  </nav>
  <el-main class="box-card">
    <el-card class="box-card" style="max-height: 90px;overflow-y: auto;">
      <el-button
              style="margin-top: 5px"
              v-for="item in items"
              :key="item.label"
              :type="item.type"
              @click="goto('/f/tags/'+item.id)">
        {{ item.label }}
      </el-button>
    </el-card>
    <el-card class="box-card">
      <div class="infinite-list-wrapper" style="overflow:auto">
        <ul
                class="infinite-list"
                infinite-scroll-disabled="disabled">
          <li v-for="blog in blogs" class="infinite-list-item">
            <div @click="goto('/f/blog/'+blog.id)" style="cursor: pointer">
              <el-card :body-style="{ padding: '0px'}" shadow="hover">
                <img :src="blog.firstPicture" class="blog-image">
                <div style="padding: 14px;float: left;max-width: 500px;">
                  <span>{{blog.title}}</span>
                  <div class="bottom clearfix">
                    <time class="time">{{blog.description}}</time>
                  </div>
                  <span>{{blog.updateTime}}</span>

                </div>
              </el-card>
            </div>

          </li>
        </ul>
      </div>
    </el-card>
  </el-main>


</div>

<style>
  .box-card{
    width: 100%;
    max-width: 60em !important;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
  }
</style>

<script>

  new Vue({
    el: '#app',
    data() {
      return {
        restaurants: [],
        state: '',
        timeout:  null,
        activeIndex: '2',
        currentPage : 1,
        p : 1,
        s : 10,
        total : 0,
        items: [


        ],
        tag: [[${activeBtn}]],
        loading: false,
        blogs : [],
        b_total : 0
      }
    },
    computed: {
    },
    methods: {
      querySearchAsync(queryString, cb) {

      },

      handleSelect(item) {
        console.log(item);
      },
      getData(){
        axios.post('/f/tags/list', null ).then(res => {
          const data = res.data;
          if(data.code == '0'){
            for(var v of data.data){
              var type = v.id == this.tag ? 'primary' : "";
              this.items.push({'label': v.name, 'type': type, id: v.id})
            }
            this.total = data.count;
          }
        })
      },
      goto(h){
        window.location = h;
      },
      getBlogs(){
        axios.get('/f/blog/listPageByMap?current=' + this.p + '&size=' + this.s + '&tag_id=' + this.tag).then(res => {
          const data = res.data;
          if(data.code == '0'){
            this.blogs = data.data;
            this.b_total = data.count;
          }
        })
      },
    },
    created () {
      this.getData();
      this.getBlogs();
    }

  })
</script>
</body>
</html>